import React from 'react';
import { Layout, Table, Button, Switch, Modal, Form, message, Input } from 'antd';
import axios from '../../../utils/http';
import './GoodsLabel.css';
const { Header, Content } = Layout;
const { Column } = Table;
class GoodsLabel extends React.Component {
  state = {
    labelList: [],
    visible: false,
    classname: '',
    classdesc: '',
    modalTitle: '',
    currentLabel: {},
  };
  componentDidMount = () => {
    this.getAllLabel();
  };
  /* 获取所有标签 */
  getAllLabel = () => {
    axios({
      url: '/mm-goods/goods/qureyPll',
      method: 'get',
    }).then(({ data }) => {
      this.setState({
        labelList: data.data,
      });
    });
  };
  /* 更改标签状态 */
  updateStus = (id, stus) => {
    axios({
      url: '/mm-goods/goods/updatePllSt',
      method: 'get',
      params: {
        pllId: id,
        pllStatu: stus === true ? 1 : 0,
      },
    }).then(({ data }) => {
      if (data.code === 200) {
        message.success('状态修改成功');
        this.getAllLabel();
      } else {
        message.error('状态修改失败');
      }
    });
  };
  /* 模态框操作 */
  showModal = item => {
    let title = item === '' ? '新增标签' : '修改标签';
    this.setState({
      visible: true,
      classname: item.pll_name,
      classdesc: item.pll_desc,
      currentLabel: item,
      modalTitle: title,
    });
  };

  handleOk = () => {
    if (this.state.modalTitle.includes('新增')) {
      axios({
        url: '/mm-goods/goods/addPll',
        method: 'post',
        params: {
          pllName: this.state.classname,
          pllDesc: this.state.classdesc,
        },
      }).then(({ data }) => {
        if (data.code === 200) {
          this.getAllLabel();
          message.success('添加标签成功');
        }
        this.setState({
          visible: false,
        });
      });
    } else {
      axios({
        url: '/mm-goods/goods/updatePll',
        method: 'post',
        params: {
          pllId: this.state.currentLabel.pll_id,
          pllName: this.state.classname,
          pllDesc: this.state.classdesc,
        },
      }).then(({ data }) => {
        if (data.code === 200) {
          this.getAllLabel();
          message.success('修改标签成功');
        }
        this.setState({
          visible: false,
        });
      });
    }
  };

  handleCancel = () => {
    this.setState({
      visible: false,
      classname: '',
      classdesc: '',
    });
  };

  /* 绑定表单值 */
  changeInput = (name, val) => {
    this.setState({
      [name]: val,
    });
  };
  render() {
    return (
      <>
        <Layout>
          <Header style={{ height: 'auto' }}>
            <h1 className="title">商品标签</h1>
          </Header>
          <Content style={{ padding: '20px 20px 20px 70px' }}>
            <div style={{ textAlign: 'right', marginBottom: '20px' }}>
              <Button onClick={() => this.showModal('')}>新增</Button>
              <Modal
                title={this.state.modalTitle}
                visible={this.state.visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                className="labelModel"
                destroyOnClose
              >
                <Form>
                  <Form.Item label="分类名称">
                    <Input
                      value={this.state.classname}
                      onChange={e => this.changeInput('classname', e.target.value)}
                      placeholder="请输入标签名称"
                    />
                  </Form.Item>
                  <Form.Item label="分类简介">
                    <Input
                      value={this.state.classdesc}
                      onChange={e => this.changeInput('classdesc', e.target.value)}
                      placeholder="请输入标签简介"
                    />
                  </Form.Item>
                </Form>
              </Modal>
            </div>
            <Table
              dataSource={this.state.labelList}
              pagination={{
                defaultPageSize: 10,
                total: this.state.labelList.length,
                pageSizeOptions: [10, 15, 20],
                defaultCurrent: 1,
                showSizeChanger: true,
              }}
              rowKey="pll_id"
            >
              <Column align="center" title="ID" dataIndex="pll_id"></Column>
              <Column align="center" title="名称" dataIndex="pll_name"></Column>
              <Column align="center" title="简介" dataIndex="pll_desc"></Column>
              <Column
                align="center"
                title="启用"
                render={({ pll_statu, pll_id }) => {
                  return (
                    <>
                      <Switch
                        defaultChecked={!!pll_statu}
                        onChange={e => this.updateStus(pll_id, e)}
                      ></Switch>
                    </>
                  );
                }}
              ></Column>
              <Column
                align="center"
                title="操作"
                render={obj => {
                  return (
                    <>
                      <Button type="link" onClick={() => this.showModal(obj)}>
                        修改
                      </Button>
                    </>
                  );
                }}
              ></Column>
            </Table>
          </Content>
        </Layout>
      </>
    );
  }
}
export default GoodsLabel;
